<template>
  <div class="hot-panel">
    <div class="panel" v-for="item in 4" :key="item">
      <div class="title">
        <span style="font-size: 32rpx; font-weight: 600">人气推荐</span>
        <span style="font-size: 28rpx; color: lightgray; margin-left: 20rpx"
          >精选全攻略</span
        >
      </div>
      <div class="img-box">
        <navigator
          url="/pages/move/move"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <img src="@/static/hot/hot1.jpg" alt="" />
          <img src="@/static/hot/hot2.jpg" alt="" />
        </navigator>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.hot-panel {
  width: 90%;
  display: flex;

  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: white;
  .panel {
    padding: 10rpx;
    .img-box {
      display: flex;
      image {
        width: 150rpx;
        height: 150rpx;
        &:last-child {
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>
